<template>
	<view>
		<view class="LoginPage">
			<view class="form">
				<form>
					<view class="uni-form-item uni-column" style="position: relative">
						<view class="title">手机号</view>
						<input class="uni-input" type="number" v-model="formData.phone" placeholder="请输入手机号"
							maxlength="11" />
						<view class="code" @click="handleCode">
							{{ counting ? `${count}秒后重新获取` : "获取验证码" }}
						</view>
					</view>
					<view class="uni-form-item uni-column">
						<view class="title">验证码</view>
						<input class="uni-input" name="account" v-model="formData.vercode" placeholder="请输入验证码"
							maxlength="6" />
					</view>
				</form>
				<view class="uni-btn">
					<button @click="formSubmit" class="uni-btn-v">确认</button>
				</view>

			</view>
		</view>
		<wanl-agree ref="wanl_agree" @agree="onAgree"></wanl-agree>
	</view>
</template>
<script>
	import graceChecker from "@/common/graceChecker"; //来自 graceUI 的表单验证， 使用说明见手册 http://grace.hcoder.net/doc/info/73-3.html
	export default {
		data() {
			return {
				submitDisabled: true,
				title: "表单验证",
				pageroute: "",
				mobile: "",

				checked_01: false,
				checked_02: false,
				count: 60,
				counting: false,
				formData: {
					phone: "",
					vercode: "",
					email: "",
					newpassword: ""
				},
			};
		},


		computed: {
			checked: function() {
				if (this.checked_01 && this.checked_02) {
					uni.setStorageSync("auth_agree", 1);
					return true;
				}
				return false;
			},
			getSubmitDisabled: function() {
				if (!this.mobile) return true;
				if (!this.checked) return true;
				return false;
			},
		},
		mounted() {

		},
		methods: {
			// 发送手机动态码
			handleCode() {
				if (this.counting) return;
				var reg = /^1[3456789]\d{9}$/;
				if (!reg.test(this.formData.phone)) {
					uni.showToast({
						title: "请输入正确的手机格式",
						icon: "none",
					});
					return;
				}

				this.getCaptcha();
			},
			// 获取验证码的接口
			getCaptcha() {
				uni.request({
					url: "/sms/send",
					method: "POST",
					data: {
						event: "changemobile",
						mobile: this.formData.phone,
					},
					success: (res) => {
						this.$wanlshop.msg("验证码发送成功");
						this.counting = true;
						const timer = setInterval(() => {
							this.count--;
							if (this.count <= 0) {
								clearInterval(timer);
								this.counting = false;
								this.count = 60; // 重置倒计时时长
							}
						}, 1000);
					},
					// 1.1.8升级
					complete: (res) => {
						if (res.res.code == 4) {
							this.$refs.wanlCaptcha
								.init({
									event: "register",
									mobile: this.formData.phone
								})
								.then(() => {
									// 验证通过回调
									this.$wanlshop.msg("验证码发送成功");
									this.counting = true;
									const timer = setInterval(() => {
										this.count--;
										if (this.count <= 0) {
											clearInterval(timer);
											this.counting = false;
											this.count = 60; // 重置倒计时时长
										}
									}, 1000);
								})
								.catch(() => {
									uni.navigateBack({
										delta: 1
									});
								});
						}
					},
				});
			},


			onKeyInput: function(e) {
				this.submitDisabled = false;
			},
			//手机号修改
			formSubmit: function(e) {

				var reg = /^1[3456789]\d{9}$/;
				if (!reg.test(this.formData.phone)) {
					uni.showToast({
						title: "请输入正确的手机格式",
						icon: "none",
					});
					return;
				}
				uni.request({
					url: "/wanlshop/user/changemobile",
					method: "POST",
					data: {
						mobile: this.formData.phone,
						captcha: this.formData.vercode,
					},
					// 1.1.8 升级
					complete: (res) => {
						if (res.res.code == 1) {
							this.$wanlshop.to(`/pages/user/auth/auth`, "slide-in-bottom", 200);

						} else {

						}
					},
				});
				// } else {
				//   this.$wanlshop.msg(graceChecker.error);
				// }
			},
			sectionChange(index) {
				this.current = index;
				this.formData.phone = ''
				this.formData.email = ''
				this.formData.password = ''
				this.parent_user_id = ''
			},
			auth() {
				this.$wanlshop.to(`auth?url=${this.pageroute}`);
			},

			help() {
				this.$wanlshop.to(`/pages/user/help?url=${this.pageroute}`);
			},
			onDetails(id, title, checked) {
				this.$refs.wanl_agree.show(id, title, checked);
			},
			onAgree(id) {
				if (id) {
					this.imgUrl = id;
					this.checked_01 = true;
					this.checked_02 = true;
				}
				// if (id == this.$store.state.common.appConfig.user_agreement) {
				//   this.checked_01 = true;
				//   if (!this.checked_02) {
				//     console.log(this.$store.state.common.appConfig.privacy_protection);
				//     this.onDetails(
				//       this.$store.state.common.appConfig.privacy_protection,
				//       "隐私保护",
				//       this.checked_02
				//     );
				//   }
				// }
				// if (id == this.$store.state.common.appConfig.privacy_protection) {
				//   this.checked_02 = true;
				// }
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import url("auth.css");

	.LoginPage {
		width: 100%;
		height: calc(100vh - 44px);
		background-image: url("/static/images/index/bg.png");
		background-repeat: no-repeat;
		background-position: center bottom;
		background-size: 100% 242rpx;
		/* overflow: hidden; */
		padding-top: 40rpx;


		.down {
			color: #666666;
			font-size: 28rpx;
			position: absolute;
			top: 0;
			right: 20rpx;
		}

		.logo {
			width: 162rpx;
			height: 162rpx;
			margin: 0 auto;
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
			text-align: center;

			.img {
				width: 152rpx;
				height: 152rpx;
				margin-bottom: 36rpx;
			}
		}

		.form {
			padding: 0 24rpx;
			margin-top: 80rpx;
			clear: both;

			.uni-input {
				height: 96rpx;
				line-height: 96rpx;
				background: #f8f8f8;
				padding: 0 30rpx;
				margin-top: 20rpx;
				border-radius: 16rpx;
			}

			.type {
				display: flex;
				margin-bottom: 40rpx;

				.index1 {
					margin-left: 30rpx;
				}

				.active {
					font-weight: bold;
					position: relative;
				}

				.active::after {
					content: '';
					width: 60rpx;
					height: 8rpx;
					background: #333333;
					position: absolute;
					top: 44rpx;
					left: 50%;
					margin-left: -30rpx;
					border-radius: 30rpx;
				}
			}
		}

		.uni-form-item {
			margin-top: 20rpx;

			.code {
				font-size: 28rpx;
				color: #fc5351;
				position: absolute;
				right: 30rpx;
				top: 85rpx;
			}

			.title {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
			}

			.eye {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				right: 30rpx;
				top: 86rpx;
			}
		}

		.uni-btn-v {
			width: 702rpx;
			height: 96rpx;
			background: #eb5641;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin-top: 40rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #ffffff;
			line-height: 96rpx;
			position: fixed;
			left: 24rpx;
			bottom: 380rpx;
		}

		.goregist {
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			text-align: center;
			margin-top: 82rpx;
		}
	}
</style>